<template>
  <TrLayout
    v-model="checkPopup"
    :title="title"
    :width="width"
    :zIndex="zIndex"
    @close="closeHandle"
    @confrim="confrimHandle"
  >
    <div class="power-content-wrap bd-rd-4 fx of-hd bd-dc-1">
      <div class="power-left bd-e7-rt fx fx-cl fx-sk">
        <div class="ft-14 ht-48 cr-bk-9 lh-48 pd-lf-16 bg-f8 fx-sk">
          {{ leftTitle }}
        </div>
        <div class="mg-16 fx-sk">
          <el-input
            class="mg-bt-16"
            v-model="filterText"
            :placeholder="searchPlaceholder"
            type="text"
            @keydown.native.enter="searchLeftHandle"
            suffix-icon="el-icon-search"
          ></el-input>
          <el-tree
            class="filter-tree"
            show-checkbox
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </div>
      <div class="power-right">
        <div class="ht-48 pd-16 fx-bt-ct bg-f8">
          <div class="ft-14 cr-bk-9">{{ rightTitle }}</div>
          <div></div>
        </div>
        <div class="right-content-wrap"></div>
      </div>
    </div>
  </TrLayout>
</template>

<script>
import TrLayout from "@/components/Tr-layout/Tr-layout.vue";
export default {
  name: "TrPowerBox",
  components: {
    TrLayout,
  },
  props: {
    searchPlaceholder: {
      type: String,
      default: "请输入查询关键字",
    },
    zIndex: {
      type: Number,
      default: 1001,
    },
    title: {
      type: String,
      default: "权限分配",
    },
    value: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 960,
    },
    leftTitle: {
      type: String,
      default: "用户列表",
    },
    rightTitle: {
      type: String,
      default: "操作权限",
    },
    leftRequstObj: {
      type: Object,
      default: () => {},
    },
  },
  data: () => ({
    filterText: "",
    defaultProps: {
      children: "children",
      label: "label",
    },
    data: [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ],
  }),
  watch: {
    value(newVal) {
      if (!newVal) {
        this.resetParamsHandle();
        return;
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {
    checkPopup() {
      return this.value;
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    resetParamsHandle() {
      this.filterText = "";
    },
    closeHandle() {
      this.$emit("input", false);
    },
    confrimHandle() {},
  },
};
</script>

<style lang="scss" scoped>
.power-content-wrap {
  height: 568px;
  .power-left {
    width: 272px;
    .t-item {
      &:hover {
        background-color: $select-hover-background;
      }

      &.checked {
        color: $main-color;
        background-color: $select-active-background;
        .radio-icon {
          border: none;
          background-image: url("~@/assets/icons/circle_active_icon.png");
          background-size: cover;
        }
        .check-icon {
          border: none;
          background-image: url("~@/assets/icons/check_active_icon.png");
          background-size: cover;
        }
      }
    }
    .load-tips {
      text-align: center;
      color: #c0c4cc;
    }
  }
  .power-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .right-content-wrap {
      padding: 16px 16px 0 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
